import { SlateElement } from "@wangeditor/editor";
import { BuildCardElement } from "./customTypes";

// 生成 html 的函数
function buildCardToHtml(elem: SlateElement): string {
  const {
    title = "",
    address = "",
    price = "",
    tags = "",
    cover = "",
    id = 0,
    status_color,
    status,
    area = "",
    status_background,
    disadvantage_color,
    disadvantage_cover,
    disadvantage_name
  } = elem as BuildCardElement;
  let newTags = tags.split(",");
  let span = "";
  console.log(disadvantage_name);
  for (let i = 0; i < newTags.length; i++) {
    span += `<span style="background-color: #F1F1F1;padding: 3px .25em;" class="lou-intro-four-tag">${newTags[i]}</span>`;
  }
  const html = `<div style="border-top:1px solid #C1C1C1;border-bottom: 1px solid #C1C1C1;font-size: 16px;padding: 17px;margin-top: 10px;" class="lou" data-w-e-type="build-card" data-title=${title} data-disadvantage_color='${disadvantage_color}' data-disadvantage_cover='${disadvantage_cover}' data-disadvantage_name='${disadvantage_name}' data-area='${area}' data-status_background='${status_background}' data-status='${status}' data-status_color='${status_color}' data-price=${price} data-address=${address} data-tags=${tags} data-id=${id} data-cover=${cover}>
  <div style="display: flex;" class="lou-img">
    <div style="width: 11.8125em;height:8.625em" class="lou-img-box">
      <img src="${cover}" alt="" style="width: 100%;object-fit: fill;vertical-align: bottom;">
    </div>
    <div style="margin-left:  2.75em" class="lou-intro">
      <div style="font-size:  1.125em;" class="lou-intro-one">
        <span style="color: ${status_color};background-color: ${status_background};padding:3px .25em;font-size: .75em;" class="lou-intro-one-status">${status}</span>
        <span style="color: #1F2123;font-size:1.125em;font-weight: 600;" class="lou-intro-one-title">${title}</span>
      </div>
      <div style="font-size:.875em;color: #555B62;margin-top: .3125em;" class="lou-intro-two">
        <span class="lou-intro-two-address">【${address}】</span>
        <span style="padding-left:.625em;" class="lou-intro-two-area">${area}</span>
      </div>
      <div style="font-size: 1.5625em;margin-top: .3125em;" class="lou-intro-three">
        <span style="color: #f60;font-size: 1.5625em;" class="lou-intro-three-price">${price}</span>
        <span style="color: #1F2123;font-size: 1em;" class="lou-intro-three-uint">元/m²</span>
      </div>
      <div style="font-size: .75em;color: #555B62;margin-top: .3125em;" class="lou-intro-four">
        ${span}
      </div>
      <div style="font-size: .875em;margin-top: .9375em;display: ${disadvantage_cover ? "flex" : "none"};" class="lou-intro-five">
        <div class="lou-intro-five-img-box" style="width: 1.125em;display: flex;justify-content: center;flex-direction: column;">
          <img src="${disadvantage_cover}" alt="" style="width: 100%;object-fit: cover;vertical-align: bottom;">
        </div>
        <div class="lou-intro-five-rank" style="color:${disadvantage_color};margin-left: .625em;">
          <span>${disadvantage_name}</span>
        </div>
      </div>
    </div>
  </div>
</div>`;
  return html;
}

const conf = {
  type: "build-card",
  elemToHtml: buildCardToHtml
};

export default conf;
